<template>
    <div>
        <h2>百度地图</h2>
         <input id="tipinput"/>
        <div id="container" ref="mapContainer">

        </div>
    </div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader'
import {ref,onMounted} from 'vue'
const mapContainer = ref('')
onMounted(()=>{
    let aMap = AMapLoader.load({
        key:'341a1e3deb5415be392a67c4a2ab9b51',
        version:'2.0',
        plugins:['AMap.ControlBar']
    })
    aMap.then((AMap)=>{
        let map = new AMap.Map(mapContainer.value,{
            zoom:10,//初始化地图级别
            center:[116.397428,39.90923],
        });
        AMap.plugin('AMap.HawkEye',function(){
            // 在回调函数中实例化插件，并使用插件功能.
            const hawkeye = new AMap.HawkEye();
            map.addControl(hawkeye);//添加工具条插件到页面
        })
          //输入提示
    var autoOptions = {
        input: "tipinput"
    };

    AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], function(){
        var auto = new AMap.AutoComplete(autoOptions);
        var placeSearch = new AMap.PlaceSearch({
            map: map
        });  //构造地点查询类
        auto.on("select", select);//注册监听，当选中某条记录时会触发
        function select(e) {
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);  //关键字查询查询
        }
    });
    })
})
</script>

<style scoped>
#container {
    padding: 0;
    margin: 0;
    width: 70vw;
    height: 70vh;
}

</style>